/* Valorite Theme */
.vuefinder__themer[data-theme='valorite'] {
  --vf-selection-bg: #374151;
  --vf-selection-border: #374151;
  /* Background Colors */
  --vf-bg-primary: #1f2937;
  --vf-bg-secondary: #111827;
  --vf-bg-tertiary: #374151;
  --vf-bg-hover: #374151;
  --vf-bg-selected: #4b5563;
  --vf-bg-disabled: #374151;

  /* Text Colors */
  --vf-text-primary: #f9fafb;
  --vf-text-secondary: #d1d5db;
  --vf-text-tertiary: #9ca3af;
  --vf-text-disabled: #6b7280;
  --vf-text-inverse: #1f2937;

  /* Border Colors */
  --vf-border-primary: #374151;
  --vf-border-secondary: #4b5563;
  --vf-border-focus: #60a5fa;
  --vf-border-error: #f87171;

  /* Accent Colors */
  --vf-accent-primary: #60a5fa;
  --vf-accent-secondary: #22d3ee;
  --vf-accent-success: #34d399;
  --vf-accent-warning: #fbbf24;
  --vf-accent-error: #f87171;

  /* Interactive Colors */
  --vf-interactive-hover: #374151;
  --vf-interactive-active: #4b5563;
  --vf-interactive-focus: #1e3a8a;

  /* Shadow Colors */
  --vf-shadow-sm: rgba(0, 0, 0, 0.3);
  --vf-shadow-md: rgba(0, 0, 0, 0.4);
  --vf-shadow-lg: rgba(0, 0, 0, 0.5);
  --vf-shadow-modal: rgba(0, 0, 0, 0.4);

  /* Overlay Colors */
  --vf-overlay-bg: rgba(75, 85, 99, 0.7);
  --vf-overlay-border: rgba(107, 114, 128, 0.9);
  --vf-overlay-text: #9ca3af;

  --vf-dropdown-bg: #1f2937;
  --vf-dropdown-border: #374151;
  --vf-dropdown-text: #f9fafb;
  --vf-dropdown-hover: #374151;

  /* Scrollbar Colors */
  --vf-scrollbar-handle: rgba(156, 163, 175, 0.4);
  --vf-scrollbar-handle-hover: rgba(156, 163, 175, 0.6);
  --vf-scrollbar-handle-active: rgba(156, 163, 175, 0.8);
}

/* Valorite Theme - Selection Area */
.selection-area-container[data-theme='valorite'] {
  --vf-selection-bg: #374151;
  --vf-selection-border: #60a5fa;
}

/* Valorite Theme - Tree View */
.vuefinder[data-theme='valorite'] .vuefinder__treestorageitem__header {
  @apply bg-(--vf-bg-primary);
}

.vuefinder[data-theme='valorite'] .vuefinder__treestorageitem__subfolder {
  @apply bg-(--vf-bg-primary);
}

/* Valorite Theme - Item Icons */
.vuefinder[data-theme='valorite'] .vuefinder__item-icon__folder--open {
  fill: var(--vf-accent-primary);
  stroke: #60a5fa;
}
